// 导入主题变量，也可以重写主题变量
// @import 'vxe-table/styles/cssvar.scss';
// @import 'vxe-pc-ui/styles/cssvar.scss';

@use '@/components/ui/vxe-table/src/lib/plugin-render-element/style.scss';
@import 'vxe-pc-ui/lib/style.css';
@import 'vxe-table/lib/style.css';

:root {
  // 字体大小
  --vxe-ui-font-size-small: 14px;
}

[data-vxe-ui-theme='light'] {
  .vxe-grid {
    // 斑马纹
    --vxe-ui-table-row-striped-background-color: #f2f4f5;
    // 表头背景色
    --vxe-ui-table-header-background-color: #e5e5e5;
    // 表头分割线颜色
    --vxe-ui-table-resizable-line-color: #fff;
    // 字体颜色
    --vxe-ui-font-color: var(--el-color-black);
    // 主题颜色
    --vxe-ui-font-primary-color: var(--main-color);
    // 活动颜色
    // --vxe-ui-font-primary-tinge-color: #d83434;
    // // 松开颜色
    // --vxe-ui-font-primary-lighten-color: #c08f24;
    // 按下颜色
    --vxe-ui-font-primary-darken-color: var(--main-color);
    // 鼠标悬停颜色
    --vxe-ui-font-primary-lighten-color: var(--el-color-primary-light-3);
    // 选中颜色
    --vxe-ui-font-primary-hover-color: var(--main-color);
    // 禁用颜色
    // --vxe-ui-font-primary-disabled-color: #bfbfbf;
    // 表头文字颜色
    --vxe-ui-table-header-font-color: var(--el-color-black);
    // loading背景色
    // --vxe-ui-loading-background-color:hsla(0,0%,100%,.5)
    // loading颜色
    --vxe-ui-loading-color: var(--main-color);
    // 表尾文字颜色
    --vxe-ui-table-footer-font-color: var(--el-color-black);
    // 列宽拖拽面板背景色
    --vxe-ui-table-resizable-drag-line-color: var(--main-color);

    // 如果隐藏滚动条,会导致vxe动态高度计算细微闪烁
    // 需要有一个占位,然后控制滚动条颜色来模拟显示和隐藏
    ::-webkit-scrollbar {
      width: 8px !important;
      height: 8px !important;
    }

    //   &:hover ::-webkit-scrollbar {
    //     width: 8px !important;
    //     height: 8px !important;
    //   }

    // 滑块默认隐藏
    ::-webkit-scrollbar-thumb {
      background-color: transparent !important;
      background-clip: content-box;
    }

    // 进入表格显示滑块
    &:hover ::-webkit-scrollbar-thumb {
      background-color: #dddee0 !important;
    }

    // 鼠标进入滑块
    &:hover ::-webkit-scrollbar-thumb:hover {
      background-color: #c7c9cc !important;
    }

    // 导轨
    ::-webkit-scrollbar-track {
      background-color: transparent !important;
      background-clip: content-box;
    }

    .vxe-footer--row {
      background-color: var(--el-color-primary-light-6);
    }
  }
}

[data-vxe-ui-theme='dark'] {
  // 表头分割线颜色
  --vxe-ui-table-resizable-line-color: #3a3d40;
  // 文字颜色
  --vxe-ui-font-color: var(--el-color-white);
  // 表头文字颜色
  --vxe-ui-table-header-font-color: var(--el-color-white);
  // 表单背景色
  --vxe-ui-layout-background-color: var(--el-card-bg-color);

  .vxe-grid {
    ::-webkit-scrollbar {
      width: 8px !important;
      height: 8px !important;
    }

    //   &:hover ::-webkit-scrollbar {
    //     width: 8px !important;
    //     height: 8px !important;
    //   }

    // 滑块默认隐藏
    ::-webkit-scrollbar-thumb {
      background-color: transparent !important;
      background-clip: content-box;
    }

    // 进入表格显示滑块
    &:hover ::-webkit-scrollbar-thumb {
      background-color: #3f4042 !important;
    }

    // 鼠标进入滑块
    &:hover ::-webkit-scrollbar-thumb:hover {
      background-color: #5c5d61 !important;
    }

    // 导轨
    ::-webkit-scrollbar-track {
      background-color: transparent !important;
      background-clip: content-box;
    }
  }
}

.vxe-grid {
  // 背景色 保持和card一致
  --vxe-ui-layout-background-color: var(--el-card-bg-color);

  // 表头分割线
  .vxe-cell--col-resizable::before {
    height: 100% !important;
  }

  // :deep(td[rowspan]) {
  //   border-bottom: 1px solid #eee;
  // }

  // 去除斑马纹 用于合并单元格
  .no-stripe {
    --vxe-ui-table-row-striped-background-color: var(--el-card-bg-color);
    // background-image: linear-gradient(
    //   var(--vxe-ui-table-border-color),
    //   var(--vxe-ui-table-border-color)
    // );
  }
}

.vxe-grid--toolbar-wrapper .vxe-toolbar {
  padding: 0 0 var(--el-card-padding);
}

// filter和sort 默认隐藏
.filter-table {
  .vxe-cell {
    position: unset !important;
    z-index: unset !important;
  }

  .vxe-cell--filter .vxe-filter--btn,
  .vxe-table .vxe-cell--sort-vertical-layout {
    display: none !important;
  }

  // 移入显示
  .vxe-header--column {
    &:hover {
      .vxe-cell--filter .vxe-filter--btn {
        display: inline !important;
      }
      .vxe-cell--sort.vxe-cell--sort-vertical-layout {
        display: flex !important;
      }
    }
  }

  // 选择显示
  .is--filter-active .vxe-cell--filter .vxe-filter--btn {
    display: inline !important;
  }
  .is--sortable .vxe-cell--sort.vxe-cell--sort-vertical-layout {
    &:has(> .sort--active) {
      display: flex !important;
    }
  }
}

// 渲染器样式兼容
// .el-form-item.is-error .el-form-item__content .el-input__wrapper,
// .el-form-item.is-error .el-form-item__content .el-input__wrapper:hover,
// .el-form-item.is-error .el-form-item__content .el-input__wrapper:focus,
// .el-form-item.is-error .el-form-item__content .el-input__wrapper.is-focus,
// .el-form-item.is-error .el-form-item__content .el-textarea__inner,
// .el-form-item.is-error .el-form-item__content .el-textarea__inner:hover,
// .el-form-item.is-error .el-form-item__content .el-textarea__inner:focus,
// .el-form-item.is-error .el-form-item__content .el-textarea__inner.is-focus,
// .el-form-item.is-error .el-form-item__content .el-select__wrapper,
// .el-form-item.is-error .el-form-item__content .el-select__wrapper:hover,
// .el-form-item.is-error .el-form-item__content .el-select__wrapper:focus,
// .el-form-item.is-error .el-form-item__content .el-select__wrapper.is-focus,
// .el-form-item.is-error .el-form-item__content .el-input-tag__wrapper,
// .el-form-item.is-error .el-form-item__content .el-input-tag__wrapper:hover,
// .el-form-item.is-error .el-form-item__content .el-input-tag__wrapper:focus,
// .el-form-item.is-error .el-form-item__content .el-input-tag__wrapper.is-focus {
//   box-shadow: 0 0 0 1px var(--el-color-danger) inset;
// }
.vxe-form {
  .vxe-form--item.is--padding > .vxe-form--item-content {
    padding: 1em;
  }

  // 渲染器继承el校验样式
  .vxe-form--item.is--error {
    .vxe-form--item-content {
      .el-input__wrapper,
      .el-textarea__inner,
      .el-select__wrapper,
      .el-input-tag__wrapper {
        &,
        &:hover,
        &:focus,
        &.is-focus {
          box-shadow: 0 0 0 1px var(--el-color-danger) inset;
        }
      }
    }
  }
}

// 表单展开
.vxe-form--item-trigger-node {
  font-size: 14px !important;
  color: var(--main-color) !important;
  &:hover {
    color: var(--el-color-primary-light-5) !important;
  }
}
